﻿<style>
    .btn-file {
        position: relative;
        overflow: hidden;
    }

        .btn-file input[type=file] {
            position: absolute;
            top: 0;
            right: 0;
            min-width: 100%;
            min-height: 100%;
            font-size: 100px;
            text-align: right;
            filter: alpha(opacity=0);
            opacity: 0;
            outline: none;
            background: white;
            cursor: inherit;
            display: block;
        }
</style>
<div style=" padding-top: 20px;">
    <div class="row clearfix">
        <div class="col-md-12 column">

            <h3 class="text-center text-muted">
                {{title}}
            </h3>
            <div class="row clearfix">

                <!--LOGO-->
                <div class="col-md-12 column text-center">

                    <!--Icon and Backgroud selection -->
                    <span ng-show="clipArt">
                        <span style="font-size: 100px;" class=" fa-stack fa-lg">
                            <i class="fa {{imageBackGround}}  {{ImageBgLogoSize.size}} {{backgroundRotation.rotation}}" ng-style="imagebackgroundColor"></i>
                            <i class="fa {{selected}} {{ImageLogoSize.size}} {{logoRotation.rotation}} " ng-style="clipArtColor"></i>
                        </span>
                    </span>
                    <div>
                        <img style="border: 0px; background: transparent;" ng-show="image" ng-src="{{imageSrc}}" alt="thumbnail" width="140" class="img-thumbnail">
                    </div>
                </div>
            </div>

            <!--LOGO NAME-->
            <div class="row clearfix">
                <div class="col-lg-12">
                    <div class="text-center">
                        <div class="row clearfix">
                            <div class="col-md-12 column">
                                <label class=" alert-success "> {{imageName}}</label>
                            </div>
                        </div>
                    </div>                  
                </div>
            </div>
 
            <!--OUTER TABS FRO DESIGNEER AND UPLOADER-->
            <tabset justified="true">
                
                <!--LOGO DESIGNER-->
                <tab heading="Create Your Logo">
                    <hr />
                    <div class='text-center'>
                        <div class="row clearfix">
                            <div class="col-md-12 column">
                                <div class="btn-group">
  <!--****************************************************************************************************************************************************************-->
                                    <!--Logo gallery select list-->
                                    <button id="logoid" onclick="angular.element(this).scope().chooseLogo(this)" class="btn btn-info  btn-xs">Logo Gallery  <i class="fa fa-star"></i></button>
                                    <button id="logoBgid" onclick="angular.element(this).scope().chooseLogo(this)" class="btn btn-info  btn-xs">Logo background Gallery  <i class="fa fa-square"></i></button>
                                    <button  ng-click="iconSelection()" class="btn btn-success  btn-xs">Save Your Logo <i class="fa fa-arrow-circle-o-up"></i> </button>
                                </div>
                            </div>
                        </div>
                        </div>
                        <hr />

                        <!--BUTTONS AND EDITING TOOLS-->
                        <tabset justified="true">

                            <!--TAB ONE-->
                            <tab heading="Logo tools">
                                <hr />
                                <div class="col-md-6 col-lg-offset-3 column text-center form-group">
                                    <div class="btn btn-group">

                                        <!--color select list-->
                                        <input class=" btn btn-primary form-control  btn-xs" type="color" title="choose logo color" value="#FFF" style="width: 40px; height: 22px;"
                                               ng-model="logoColorpicked" value="colores"
                                               onchange="angular.element(this).scope().chooseLogoColor(this)" />

                                        <!--apply button list-->
                                        <div class="btn btn-danger  btn-xs"> Apply logo color </div>
                                    </div>
                                    <div class="btn btn-group">
                                        <div class="dropdown">

                                            <!--rotation select list-->
                                            <button class="btn btn-warning dropdown-toggle  btn-xs" type="button" id="rotateDropdown" data-toggle="dropdown" aria-expanded="true">
                                                Rotate Logo
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu" role="menu" aria-labelledby="rotateDropdown">
                                                <li ng-click="setRotateIndex($index);$parent.open =!$parent.open" ng-repeat="  rotate in ImageRotation">{{ rotate.name}}</li>
                                            </ul>
                                        </div>

                                        <!--size select list-->
                                        <br />
                                        <div class="dropdown">
                                            <button class="btn btn-success dropdown-toggle  btn-xs " type="button" id="sizeDropdown" data-toggle="dropdown" aria-expanded="true">
                                                Logo Size
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu" role="menu" aria-labelledby="sizeDropdown">
                                                <li ng-click="setSizeIndex($index);$parent.open =!$parent.open" ng-repeat="  size in logoSize">{{ size.name}}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </tab>

                            <!--TAB TWO-->
                            <tab heading="Logo Background tools">
                                <hr />
                                <div class="col-md-6 col-lg-offset-3 column text-center form-group">
                                    <div class="btn btn-group">

                                        <!--color select list-->
                                        <input class=" btn btn-primary form-control  btn-xs" type="color" title="choose logo color" value="#FFF" style="width: 40px; height: 22px;"
                                               ng-model="backgorundColorpicked" value="colores"
                                               onchange="angular.element(this).scope().chooseBackgroundColor(this)" />

                                        <!--apply button list-->
                                        <div class="btn btn-danger  btn-xs"> Apply Background color </div>
                                    </div>
                                    <div class="btn btn-group">
                                        <div class="dropdown">
                                            <!--rotation select list-->
                                            <button class="btn btn-warning dropdown-toggle  btn-xs" type="button" id="rotateDropdown" data-toggle="dropdown" aria-expanded="true">
                                                Rotate background Logo
                                                <span class="caret"></span>
                                            </button>

                                            <ul class="dropdown-menu" role="menu" aria-labelledby="rotateDropdown">
                                                <li ng-click="setBgRotateIndex($index);$parent.open =!$parent.open" ng-repeat="  rotate in ImageRotation">{{ rotate.name}}</li>
                                            </ul>
                                        </div>
                                        <!--size select list-->
                                        <br />
                                        <div class="dropdown">
                                            <button class="btn btn-success dropdown-toggle  btn-xs " type="button" id="sizeDropdown" data-toggle="dropdown" aria-expanded="true">
                                                Logo background Size
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu" role="menu" aria-labelledby="sizeDropdown">
                                                <li ng-click="setBgSizeIndex($index);$parent.open =!$parent.open" ng-repeat="  size in logoSize">{{ size.name}}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </tab>

                            <!--TAB THREE-->
                            <tab heading="Switch Logos">
                                <hr />
                                <div class="col-lg-offset-3 col-md-6 text-center form-group">
                                    <div class="btn btn-primary  btn-xs" ng-click="imageStackSwitchSize()"> Switch Images position </div>
                                </div>
                            </tab>

                        </tabset>                   
                </tab>
                
                

                <tab heading="Upload Your Logo">
                    <hr/>
                    <div class='text-center'>
                        <div class="row clearfix">
                            <div class="col-md-12 column">
                                <div class="btn-group">

                                    <!--upload image from user-->
                                    <span class="file-input btn btn-primary btn-file  btn-xs">
                                        Upload Your Image  <i class="fa fa-image"></i>
                                        <input type="file" accept="image/*" ng-model="file" onchange="angular.element(this).scope().file_changed(this)" />
                                    </span>
                                    <button ng-model="file" ng-show="hasImage" ng-click="uploadPicture(imageSrc)" class="btn btn-success animate-show  btn-xs">Save Image <i class="fa fa-arrow-circle-o-up"></i> </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <hr />
                </tab>

            </tabset>
       
        </div>
    </div>
</div>
